<template>
<div id="" style="height:100%">
  <van-sticky class="search">
    <div class="searchItem">
      <van-row gutter="12">
        <van-col :span="24">
          <van-field v-model="searchFilter.keywords" placeholder="请输入阵地名称" right-icon="search" @click-right-icon="handleQuery()" />
        </van-col>
        <!-- <van-col :span="4" class="text-right">
          <img :src="listImg" class="typeImg" @click="changeType()">
        </van-col> -->
      </van-row>
    </div>
    <van-tabs v-model="searchFilter.groundType" @change="handleQuery()" class="ground">
      <van-tab v-for="item in tabList" :name="item.groundType">
        <div slot="title">
          <p class="top">{{item.groundTypeName}}</p>
          <p class="num">{{item.total}}</p>
        </div>
      </van-tab>
    </van-tabs>
  </van-sticky>
  <div class="mapHeight">
    <div ref="groundMap" style="width:100%; height:100%;padding:0.3rem" id='groundMap'></div>
  </div>
</div>
</template>
<script>
import {
  BMPGL
} from "@/bmpgl.js"
import type1Icon from './imgs/type11.png'
import type2Icon from './imgs/type12.png'
import type3Icon from './imgs/type13.png'
import type4Icon from './imgs/type14.png'
import mapMixin from './mixin.js'
import {
  RadarOverlay
} from './overlay'
export default {
  name: "",
  mixins: [mapMixin],
  // props: {
  //   tabList: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data() {
    return {
      showMap: false,
      // listImg: require('../../../assets/images/list.png'),
      ak: "BifotZA37yhTqeoObIV7iTQXchzswpnH",
      searchFilter: {
        groundType: '4',
        keywords: ""
      },
      moreImg: require('./imgs/more.png'),
      tabList: [],
    }
  },
  created() {
    //do something after creating vue instance
    this.$api.getCountByType().then(res => {
      this.tabList = res;
    })
  },
  methods: {
    getNearGround() {
      let me = this;
      me.$api.getNearGroundData({
        center: me.center,
        groundType: me.searchFilter.groundType,
        scale: me.zoom,
        vertex: me.vertexPoint,
        keywords: me.searchFilter.keywords
      }).then(res => {
        me.createMarker(res)
      })
    },
    //添加具体点位覆盖物
    createMarker(data) {
      let me = this;
      data.forEach((item, i) => {
        var pt = new BMapGL.Point(item.coordinate.split(",")[0], item.coordinate.split(",")[1]);
        var marker = new BMapGL.Marker(pt);
        let iconUrl = "";
        if (item.groundType == '1') {
          iconUrl = type1Icon
        } else if (item.groundType == '2') {
          iconUrl = type2Icon
        } else if (item.groundType == '3') {
          iconUrl = type3Icon
        } else {
          iconUrl = type4Icon
        }
        var opts = {
          title: item.groundName,
          enableCloseOnClick: false, //单击地图时关闭infoWindow
        };
        let imgUrl = process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item.photos[0];
        var content = "<div class='infoWindow'>" +
          // "<p style='text-align:center' class=''><img src='" + imgUrl + "' class='infoWindowGroundImg'></img></p>" +
          "<p style='text-align:center;background:url(" + imgUrl + ");background-size:cover;background-position:center' class='infoWindowGroundImg'></p>" +
          "<p class='mt8 oneline'>地址：" + item.address + "</p>" +
          "<p class='distAlign mt4'><span style='width: calc(100% - 1.2rem);text-overflow: ellipsis;white-space: nowrap;overflow: hidden;'>咨询电话：" + item.tel + "</span>" +
          "<span style='color:#eb4446' id='detailBtn'>详情<img src='" + this.moreImg + "' class='moreImg'></img></span></p></div>";
        var infoWindow = new BMapGL.InfoWindow(content, opts);
        marker.setIcon(new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 20)));
        marker.addEventListener('click', function() {
          me.mapInit.openInfoWindow(infoWindow, pt); // 开启信息窗口
        });
        infoWindow.addEventListener("clickclose", function() {
          console.log("关闭")
          //关闭信息窗口
          // that.clearOverlaysInParking();
        });
        // console.log("infoWindow:",infoWindow)
        if (!infoWindow.isOpen()) {
          infoWindow.addEventListener("open", function() {
            var btn = document.getElementById("detailBtn")
            btn.addEventListener("touchstart", function() {
              me.$router.push({
                path: '/middle',
                query: {
                  groundId: item.groundId,
                  title: item.groundName
                }
              })
            })
          })
        } else {
          var btn = document.getElementById("detailBtn")
          btn.addEventListener("touchstart", function() {
            me.$router.push({
              path: '/middle',
              query: {
                groundId: item.groundId,
                title: item.groundName
              }
            })
          })
        }


        // 将标注添加到地图
        me.mapInit.addOverlay(marker);
      });
    },

    //获取统计数
    getStatistics() {
      let me = this;
      me.$api.getCountByArea().then(res => {
        me.createOverLay(res)
      })
    },
    //添加自定义覆盖物（按地区统计数）
    createOverLay(data) {
      let me = this;
      for (let i = 0; i < data.length; i++) {
        let properties = {
          title: data[i].districtName,
          text: me.getTypeName(me.searchFilter.groundType) + "：" + data[i].children.filter(x => x.groundType == me.searchFilter.groundType)[0].total
        };
        var point = new BMapGL.Point(data[i].center[0], data[i].center[1])
        const radar = new RadarOverlay(point, properties);
        me.mapInit.addOverlay(radar);
        radar.addEventListener("click", function(e) {
          var center = new BMapGL.Point(data[i].center[0], data[i].center[1]);
          me.mapInit.centerAndZoom(center, me.ZOOMBOUNDARY);
          me.clearAllOverlays()
          me.getNearGround()
        })
      }
    },
    changeType() {
      let me = this;
      me.showMap = !me.showMap;
      me.$emit("changeType", me.showMap)
    },
    handleQuery() {
      let me = this;
      me.clearAllOverlays()
      if (me.zoom >= me.ZOOMBOUNDARY) {
        me.getNearGround()
      } else {
        me.getStatistics();
      }
    },
    clearAllOverlays() {
      let me = this;
      var allOverlay = me.mapInit.getOverlays();
      for (var i = 0; i < allOverlay.length; i++) {
        me.mapInit.removeOverlay(allOverlay[i]);
      }
    },
    getTypeName(type) {
      let obj = this.tabList.filter(x => x.groundType == type)[0]
      return obj.groundTypeName
    },
  }
}
</script>
<style lang="scss">
.mapHeight {
    width: 100%;
    height: calc(100vh - 4rem);
    padding: 0.1rem;
}

.typeImg {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
}
</style>
